<template>
  <v-layout title="对账审核记录">
    <v-searchForm
      :form-data="filter_info"
      :form-title="formTitle"
      @search="search"
      @reset="reset"/>

    <v-tableBtns
      :show-export="admin&&financeRole"
      :table-title="exportTitle"
      :table-data="exportData"
      :show-group-manage="admin"
      @groupManage="groupManage"
    />
    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      @sortChange="sortChange"
      :editable="false"
      :readable="true"
      btn-class="btn"
      @del="onDelete"
      @read="read"
    />
    <v-pagination
      :page-info="pageInfo"
      :get-table-list="getTableList"
    />

    <!--分组管理对话框-->
    <el-dialog
      :visible.sync="dialogTableVisible"
      width="30%"
    >
      <v-transfer
        :data="memberList"
        :right-data="rightList"
        title="分组管理"
        @change="memberChange"
      />
    </el-dialog>
  </v-layout>
</template>

<script>
  import {mapGetters} from 'vuex'
  import auth from '@/mixins/auth'

  export default {
    name: 'Home',
    mixins: [auth],
    data() {
      return {
        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        },
        // 排序
        sidx: 'id',
        sortKey: null,
        formTitle: [
          {
            cn: 'id：',
            en: 'id'
          },
          {
            cn: '汇款信息：',
            en: 'adv_bank_info',
            placeholder: '账号/银行'
          },
          {
            cn: '汇款金额：',
            en: 'money',
            type: 'range',
            dataName: {min: 'moneyMin', max: 'moneyMax'}

          },
          {
            cn: '最近资金往来：',
            en: 'created_at',
            type: 'time'
          }
        ],
        filter_info: {},

        tableTitle: [
          {
            cn: 'id',
            en: 'id',
            sortable: true
          },
          {
            cn: '汇款账号',
            en: 'bank_account'
          },
          {
            cn: '汇款银行',
            en: 'bank_name'
          },
          {
            cn: '金额',
            en: 'money',
            sortable: true
          },
          {
            cn: '最后收款日期',
            en: 'receipt_date',
            sortable: true
          },
          {
            cn: '状态',
            en: 'cur_status'
          }
        ],
        tableData: [],

        exportTitle: [],
        exportData: [],

        group: [],
        groupLists: [
          {
            label: '分组一',
            value: ['1', '2', '3']
          },
          {
            label: '分组一',
            value: ['1', '3']
          }
        ],
        memberList: [
          {
            desc: '一号',
            value: '1'
          },
          {
            desc: 'er号',
            value: '2'
          },
          {
            desc: '三号',
            value: '3'
          }
        ],
        rightList: ['1', '3'],
        dialogTableVisible: false

      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      filter_infos() {
        const data = {}
        const origin = this.filter_info
        for (const key in origin) {
          if (!this.filter_info[key] && this.filter_info[key] !== 0) {
            this.$delete(this.filter_info, key)
            continue
          }
          if (key === 'created_at') {
            data.start_time = origin[key][0]
            data.End_time = origin[key][1]
          } else {
            data[key] = origin[key]
          }
        }
        if (!origin.created_at) {
          delete data.start_time
          delete data.End_time
        }
        return data
      }
    },
    activated() {
      this.getTableList()
    },
    methods: {

      getTableList() {
        const loading = this.$loading()
        const datas = {
          curState: 4,
          ...this.filter_infos,
          page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
          sidx: this.sidx,
          sortKey: this.sortKey,
        }

        this.$get('action/CheckingRequisition/dataGrid', datas)
          .then(res => {
            let list
            const data = res.data
            if (data.list && data.list.length) {
              list = data.list.map((item, index) => {
                const obj = item
                switch ('' + item.cur_status) {
                  case '0':
                    obj.cur_status = '等待认领'
                    break
                  case '1':
                    obj.cur_status = '商务填写'
                    break
                  case '2':
                    obj.cur_status = '财务助理审核中'
                    break
                  case '3':
                    obj.cur_status = '财务审核中'
                    break
                  case '4':
                    obj.cur_status = '已完成'
                    break
                  case '5':
                    obj.cur_status = '无人认领'
                    break
                }
                obj.bank_name = obj.adv_bank_info && JSON.parse(obj.adv_bank_info).bank_name
                obj.bank_account = obj.adv_bank_info && JSON.parse(obj.adv_bank_info).bank_account
                return obj
              })
              this.pageInfo.totalPage = res.data.totalPage
              this.pageInfo.totalRow = res.data.totalRow
            }
            this.tableData = list || [];
              loading.close()
          })
              .catch(_ => {
                loading.close()
              })

      },

      // 搜索
      search() {
        this.pageInfo.pageNumber = 1;
        this.getTableList()
      },
      reset() {
        this.filter_info = {}
        this.getTableList()
      },

      read(val) {
        this.$router.push({
          name: 'reconcile_manage.preview',
          query: {
            id: val.row.id
          }
        })
      },

      onDelete(val) {
        const data = {id: val.row.id}
        this.$post('action/CheckingRequisition/del', data)
          .then(res => {
            this.getTableList()
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
      },

      // 分组管理对话框
      groupManage() {
        this.dialogTableVisible = true
      },
      cancel() {
        this.$emit('cancel')
        this.dialogTableVisible = false
      },
      confirm() {
        if (this.rightData.length > 0) {
          this.$emit('confirm', this.rightData)
          this.dialogTableVisible = false
        } else {
          console.log('confirm')
          this.$alert('请勾选右侧至少一项', '', {
            confirmButtonText: '确定'
          })
        }
      },
      groupChange(val) {
        console.log(val)
        this.rightList = val
      },
      memberChange(val) {
        console.log(val)
      },
      // 排序
      sortChange({column, prop, order}) {
        console.log(column, prop, order)
        this.pageInfo.pageNumber = 1
        this.sidx = prop || 'id'
        this.sortKey = order === 'ascending' ? 'asc' : null
        this.getTableList()
      }

    }
  }
</script>

<style scoped>

</style>
